<template>
    <div>
        <div style="height: 30vw">

            <el-carousel :interval="4000" type="card" height="25vw">
                <el-carousel-item v-for="(item, index) in urls" :key="index">
                    <img v-bind:src="item.url" style="width: 100%;height: 100%">
                </el-carousel-item>
            </el-carousel>
        </div>
        <el-col :span="14">
        <div>
            <div v-for="Article in ArticleData" class="article" @click="toArticle(Article.newsId)">
                <el-image :src="Article.image" alt="" fit="scale-down" style="width: 180px;height: 140px">
                </el-image>
                <div style="display: inline;position: absolute;padding-left: 15px">
                    <h4 class="title">
                        {{ Article.title }}
                    </h4>
                    <p class="content" v-html="Article.content">{{ Article.content }}</p>
                </div>
                <div style="position: absolute;right: 18vw">
              <span
                      style="display: block;color: rgb(204, 204, 204);font-size: 18px;">
                {{ Article.creattime | timeFilter }}
              </span>
                </div>
                <el-divider></el-divider>
            </div>
            <div style="text-align: center">
                <el-pagination
                        :current-page.sync="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        :total="pagination.total"
                        layout="total,prev, pager, next,jumper"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
        </el-col>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        //过滤器 后端传过来的是日期和时间 这过滤成只有时间
        filters: {
            timeFilter(value) {
                let loc = value.indexOf(' ')
                return value.substring(0, loc)
            }
        },
        name: "UserHomeView",
        data() {
            return {
                urls: [
                    {url: require('../../assets/lb1.jpg')},
                    {url: require('../../assets/bg.jpg')},

                    {url: require('../../assets/lb2.jpg')},
                ],
                ArticleData: [],
                pagination: {
                    pageNum: 1,
                    pageSize: 5,
                    total: 0,
                }
            }
        },
        created() {
            this.getArticle();
        },
        methods: {
            getArticle() {
                request.get('/news/page', {
                    params: this.pagination
                }).then((res) => {
                    if (res.code==200) {
                        this.pagination.pageSize = res.data.size;
                        this.pagination.pageNum = res.data.pageNum;
                        this.pagination.total = res.data.total;
                        this.ArticleData = res.data.list;
                        // console.log(this.ArticleData)
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                });
            },
            //分页切换
            handleCurrentChange(pageNum) {
                //修改页码值为当前页码值
                this.pagination.pageNum = pageNum;
                this.getArticleList();
            },

            //通过新闻 id 获取新闻内容
            toArticle(id) {
                // console.log(id);
                this.$router.push({
                    path: '/newsItem',
                    //将id放在路径中
                    query: {
                        id: id,
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }


    ul {
        margin: 0;
        list-style: none;
        padding: 0;
    }

    li {
        border-bottom: 3px solid #fff;
        line-height: 45px;
        padding: 0 0 0 25px;
        color: #555555;
        font-size: 16px;
    }

    li:hover {
        color: #FF9933;
    }

    .article {
        cursor: pointer;
    }


    .title {
        margin: 0;
        font-size: 20px;
        width: 400px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        background: linear-gradient(to right, #e67e23, #00ffff) no-repeat right bottom;
        background-size: 0 2px;
        transition: background-size 1200ms;
    }

    .title:hover {
        background-position-x: left;
        background-size: 100% 2px;
    }

    .content {
        margin: 5px 0 5px 0;
        width: 400px;
        height: 130px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }


</style>